<template>
  <div class="search">
    <f-form ref="form" :action="api.brand" :form-key="this.formItem.brandId">
      <f-form-item label="所属分类" name="categoryId" :required="true" type="select" :data="api.category.first" :value="formItem.categoryId" label-key="categoryName" value-key="categoryId"/>
      <f-form-item label="品牌名称" name="brandName" :required="true" :value="formItem.brandName"/>
      <f-form-item label="品牌网站" name="brandSite" :value="formItem.brandSite" :slotObj="linkSolt"/>
      <f-form-item label="品牌简介" name="brandDesc" type="editor" :value="formItem"/>
      <f-form-item label="品牌Logo" type="upload" name="brandLogo" v-if="loaded" :value.sync="formItem.brandLogo"/>
    </f-form>
  </div>
</template>

<script>
  export default {
    name: 'brandForm',
    props: {},
    data () {
      return {
        isAdd: true,
        loaded: false,
        formItem: this.getFormItem()
      }
    },
    computed: {
      linkSolt: function () {
        return {
          name: 'urlPrefix',
          slotName: 'addonBefore',
          value: this.formItem.urlPrefix,
          width: 90,
          data: [{ label: 'http://', value: 'http://' }, { label: 'https://', value: 'https://' }]
        }
      }
    },
    methods: {
      getFormItem () {
        return {
          brandSite: ''
        }
      },
      getDetails (brandId) {
        this.http.get(this, {
          url: this.api.brand.get,
          params: {
            id: brandId
          },
          success: function (me, data) {
            me.formItem = data
            me.loaded = true
          }
        })
      },
      setData (data) {
        this.isAdd = true
        this.$refs.form.resetFields()
        this.formItem = this.getFormItem()
        if (data && data.brandId) {
          this.formItem.brandId = data.brandId
          this.getDetails(data.brandId)
          this.isAdd = false
        } else {
          this.loaded = true
        }

      },
      handleSubmit () {
        this.$refs.form.submit({ brandLogo: this.formItem.brandLogo, brandDesc: this.formItem.brandDesc })
      }
    },
    created () {

    },
    components: {}
  }
</script>

<style scoped lang="less" rel="stylesheet/less">

</style>
